<!DOCTYPE html>
<html lang="zh-Hans">


<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">可视化</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active">
							 <a href="/">首页</a>
						</li>
						<li>
							 <a href="/show">图表</a>
						</li>
					</ul>
				</div>

			</nav>

		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="row">
				<div class="col-md-12">
					<h3 class="text-center">全球参赛国家分布</h3>
					<hr>
					<div id="map" style="width:100%;height:400px"></div>
				</div>
				<br><br>
				<div class="col-md-6">
					<div class="thumbnail">
						<img alt="300x200" src="/static/images/game_age.png" />
						<div class="caption">
							<h3>
								参赛年龄分布情况
							</h3>


						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="thumbnail">
						<img alt="300x200" src="/static/images/game_height.png" />
						<div class="caption">
							<h3>
								参赛者身高情况
							</h3>


						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="thumbnail">
						<img alt="300x200" src="/static/images/game_sex.png" />
						<div class="caption">
							<h3>
								参赛者性别占比
							</h3>


						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="thumbnail">
						<img alt="300x200" src="/static/images/game_year.png" />
						<div class="caption">
							<h3>
								各年份参赛人数变化
							</h3>

						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/world.js"></script>
<script>
function map() {
var myChart = echarts.init(document.getElementById('map'));
 option = {
		tooltip: {
			trigger: 'item'
		},
		series: [{
			name: "", //鼠标移动提示文字
			type: "map",
			map: "world", //渲染世界地图
			label: {
				//控制显示对于地区的汉字

				color: "#545454", //控制地区名的字体颜色
				fontSize: 10
			},
			itemStyle: {
				areaColor: "#fff", //设置地图背景色
				borderColor: "#33ccff", //设置地图边线颜色
			},
			roam: false, //支持滚轮放大缩小 以及拖拽
			zoom: 1.2, //控制地图的放大和缩小
			emphasis: {
				//控制鼠标滑过之后的背景色和字体颜色
				label: {
					color: "#000",
					fontSize: 12,
				},
				itemStyle: {
					areaColor: "#33ccff",
					borderColor: "#33ccff",
				},
			},
			data: [{'name': 'United States', 'value': 17847}, {'name': 'France', 'value': 11988}, {'name': 'Great Britain', 'value': 11404}, {'name': 'Italy', 'value': 10260}, {'name': 'Germany', 'value': 9326}, {'name': 'Canada', 'value': 9279}, {'name': 'Japan', 'value': 8289}, {'name': 'Sweden', 'value': 8052}, {'name': 'Australia', 'value': 7513}, {'name': 'Hungary', 'value': 6547}, {'name': 'Poland', 'value': 6143}, {'name': 'Switzerland', 'value': 5844}, {'name': 'Netherlands', 'value': 5718}, {'name': 'Soviet Union', 'value': 5535}, {'name': 'Finland', 'value': 5379}, {'name': 'Spain', 'value': 5224}, {'name': 'China', 'value': 4975}, {'name': 'Russia', 'value': 4922}, {'name': 'Austria', 'value': 4866}, {'name': 'Norway', 'value': 4708}, {'name': 'Czechoslovakia', 'value': 4352}, {'name': 'South Korea', 'value': 4344}, {'name': 'Romania', 'value': 4303}, {'name': 'Brazil', 'value': 3772}, {'name': 'Belgium', 'value': 3687}, {'name': 'Bulgaria', 'value': 3518}, {'name': 'Denmark', 'value': 3424}, {'name': 'Argentina', 'value': 3199}, {'name': 'West Germany', 'value': 3199}, {'name': 'Greece', 'value': 2976}, {'name': 'Mexico', 'value': 2857}, {'name': 'Yugoslavia', 'value': 2558}, {'name': 'East Germany', 'value': 2543}, {'name': 'Ukraine', 'value': 2511}, {'name': 'Cuba', 'value': 2464}, {'name': 'New Zealand', 'value': 2328}, {'name': 'Czech Republic', 'value': 1802}, {'name': 'Belarus', 'value': 1783}, {'name': 'South Africa', 'value': 1690}, {'name': 'Egypt', 'value': 1622}, {'name': 'Portugal', 'value': 1472}, {'name': 'Kazakhstan', 'value': 1429}, {'name': 'India', 'value': 1400}, {'name': 'Turkey', 'value': 1353}, {'name': 'Ireland', 'value': 1309}, {'name': 'Slovenia', 'value': 1107}, {'name': 'Chinese Taipei', 'value': 1077}, {'name': 'Colombia', 'value': 1068}, {'name': 'Slovakia', 'value': 1041}, {'name': 'Luxembourg', 'value': 992}, {'name': 'Chile', 'value': 924}, {'name': 'Puerto Rico', 'value': 923}, {'name': 'Venezuela', 'value': 921}, {'name': 'Croatia', 'value': 876}, {'name': 'Estonia', 'value': 870}, {'name': 'Latvia', 'value': 867}, {'name': 'Nigeria', 'value': 862}, {'name': 'Jamaica', 'value': 841}, {'name': 'Unified Team', 'value': 832}, {'name': 'North Korea', 'value': 795}, {'name': 'Iran', 'value': 789}, {'name': 'Kenya', 'value': 772}, {'name': 'Thailand', 'value': 732}, {'name': 'Philippines', 'value': 688}, {'name': 'Morocco', 'value': 682}, {'name': 'Hong Kong', 'value': 670}, {'name': 'Israel', 'value': 657}, {'name': 'Lithuania', 'value': 654}, {'name': 'Iceland', 'value': 627}, {'name': 'Uruguay', 'value': 570}, {'name': 'Pakistan', 'value': 562}, {'name': 'Tunisia', 'value': 561}, {'name': 'Algeria', 'value': 551}, {'name': 'Mongolia', 'value': 550}, {'name': 'Peru', 'value': 532}, {'name': 'Malaysia', 'value': 510}, {'name': 'Uzbekistan', 'value': 491}, {'name': 'Guatemala', 'value': 425}, {'name': 'Senegal', 'value': 393}, {'name': 'Serbia', 'value': 388}, {'name': 'Ethiopia', 'value': 378}, {'name': 'Trinidad and Tobago', 'value': 373}, {'name': 'Liechtenstein', 'value': 369}, {'name': 'Ghana', 'value': 359}, {'name': 'Indonesia', 'value': 355}, {'name': 'Bahamas', 'value': 348}, {'name': 'Singapore', 'value': 338}, {'name': 'Lebanon', 'value': 327}, {'name': 'Serbia and Montenegro', 'value': 321}, {'name': 'Cameroon', 'value': 312}, {'name': 'Zimbabwe', 'value': 309}, {'name': 'Georgia', 'value': 286}, {'name': 'Kuwait', 'value': 284}, {'name': 'Azerbaijan', 'value': 283}, {'name': 'Dominican Republic', 'value': 277}, {'name': 'Ecuador', 'value': 277}, {'name': 'United States-1', 'value': 277}, {'name': 'United States-2', 'value': 277}, {'name': 'United States Virgin Islands', 'value': 270}, {'name': 'Angola', 'value': 267}],
		}, ],
		visualMap: [{
			type: "piecewise",
			show: true,
			itemWidth: 10,
			itemHeight: 10,
			left: "left",
			textGap: 1,
			itemGap: 2,
			pieces: [

				//分段
				{
					min: 8000
				},
				{
					min: 4000,
					max: 8000
				},
				{
					min: 2000,
					max: 4000
				},
				{
					min: 1000,
					max: 2000
				},
				{
					min: 0,
					max: 1000
				},
				{
					min: 0,
					max: 0
				},
			],
			//  orient:'horizontal', //修改横向显示 默认垂直显示
			inRange: {
				symbol: "rect", //显示数据方块小图标形状
				color: ["#e2ecf5", "#ed4343"], // 显示颜色
			},
		}, ],
	};
myChart.setOption(option);
}
   map()
</script>
</body>
</html>